<template>
    <el-row type="flex" justify="center" align="middle" class="container">
        <el-form ref="form" label-width="80px" :model="form" :rules="rules">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" type="password"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">登录</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </el-row>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    username: "",
                    password: "",
                },
                // 饿了么校验的规则对象
                // 跟表单数据是对应的
                rules: {
                    username: [
                        // 这是对应表单字段的规则数组, 里面每个对象都是一条规则
                        {
                            // 规则里面通常有三个属性
                            // trigger 触发条件
                            // message 出错的提示语
                            // 校验条件
                            trigger: "blur",
                            message: "请输入用户名",
                            required: true,
                        },
                        {
                            min: 3,
                            message: "用户名最少三位",
                            trigger: "blur",
                        },
                    ],
                    password: [
                        {
                            required: true,
                            message: "请输入密码",
                            trigger: "blur",
                        },
                    ],
                },
            };
        },
        methods: {
            onSubmit() {
                // 点击发送请求之前应该做一次表单的全部校验,
                // 只有全部成功才发送请求
                // 1. 回调函数的写法
                // this.$refs.form.validate((isValid) => {
                //     if (isValid) {
                //         console.log("登录");
                //         this.$axios({
                //             method: "post",
                //             url: "/login",
                //             data: this.form,
                //         }).then((res) => {
                //             console.log(res.data);
                //             if (res.data.message == "登录成功") {
                //                 this.$message.success("登录成功");
                //                 localStorage.setItem("token", res.data.data.token);
                //                 this.$router.push("/");
                //             }
                //         });
                //     }
                // });
                // 2. promise 格式的写法
                this.$refs.form.validate().then((isValid) => {
                    if (isValid) {
                        console.log("登录");
                        this.$axios({
                            method: "post",
                            url: "/login",
                            data: this.form,
                        }).then((res) => {
                            console.log(res.data);
                            if (res.data.message == "登录成功") {
                                this.$message.success("登录成功");
                                localStorage.setItem("token", res.data.data.token);
                                this.$router.push("/");
                            }
                        });
                    }
                }).catch(err=>{})
            },
            reset() {
                this.form = {
                    username: "",
                    password: "",
                };
            },
        },
    };
</script>

<style lang="less" scoped>
    .container {
        height: 100vh;
        background: #e4e4e4;
    }
</style>